<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>询价下单</title>
	<link href="../css/mui.min.css" rel="stylesheet">
	<link href="../css/mui.picker.min.css" rel="stylesheet">
	<link href="css/public/reset-html5.css" rel="stylesheet">
	<link href="css/wx-main.css?20161108_1" rel="stylesheet">
	<link rel="stylesheet" href="css/recycle_order.css">
	<style>
		body{
			font-size:13px;
		}
		input{
			margin:0!important;
		}
		.active{
			color:#fff;
			background:#ff9800;
			border-color:#ff9800;
		}
		
		input[type=color],
		input[type=date],
		input[type=datetime-local],
		input[type=datetime],
		input[type=email],
		input[type=month],
		input[type=number],
		input[type=password],
		input[type=search],
		input[type=tel],
		input[type=text],
		input[type=time],
		input[type=url],
		input[type=week],
		select,
		textarea {
			font-size:14px;
			line-height: 1em;
			width: 100%;
			height: auto;
			margin-bottom: 10px;
			padding: 8px;
			-webkit-user-select: text;
			border: 1px solid rgba(0,0,0,.2)!important;
			border-radius: 3px;
			outline: 0;
			background-color: #fff;
			-webkit-appearance: none;
		}
</style>
</head>
<body class="body-bg" id="main" ng-app="APP" ng-controller="appController">
<div class="white-bg showdow-1 card">
	<div>回收费用预估</div>
	<div class="recycle-price" ng-bind="order.valuation"></div>
	<div class="price-markup">具体价格以Go机网检测结果为准</div>
	<div class="phone-name" ng-bind="v_name"></div>
</div>
<form novalidate name="orderForm">
	<table>
		<tr>
			<td>回收方式</td>
			<td>
				<label>
					<div ng-click="order.repair_way=1" ng-class="{active:order.repair_way==1}">上门回收</div>
				</label>
				<label>
					<div ng-click="order.repair_way=2" ng-class="{active:order.repair_way==2}">到店回收</div>
				</label>
			</td>
		</tr>
		
		<tr>
			<td>手机号码</td>
			<td><input type="text" ng-model="order.mobphone" name="phonenumber" ng-disabled="!showphone" required placeholder="请输入您的手机号码"></td>
		</tr>
		
		<tr ng-show="!showphone">
			<th style="font-weight: 400;padding: 10px 5px;" align="right" colspan="2"><div ng-click="order.mobphone='';showphone=true;">修改手机号</div></th>
		</tr>
		
		<tbody ng-if="showphone">
			<tr>
				<td colspan="2" class="vcode">
					<span>首次下单需验证手机，请点击</span>
					<button style="vertical-align: middle;padding:0;" ng-click="sendMessage()" ng-disabled="smsCount || orderForm.phonenumber.$invalid">
						<span ng-show="!smsCount">获取验证码</span>
						<span ng-show="smsCount">
							<span ng-bind="smsCount"></span>
							<span>短信发送成功</span>
						</span>
					</button>
				</td>
			</tr>
			<tr>
				<td>验证码</td>
				<td><input type="text" ng-model="order.vcode" required placeholder="请输入验证码"></td>
			</tr>
		</tbody>
		<tr ng-if="order.repair_way==1">
			<td style="vertical-align: middle;">上门时间</td>
			<td>
				<input style="display: none;" type="text" name="time" ng-model="order.door_time" readonly required>
				<div ng-bind="order.door_time" ng-click="pickTime();" style="padding: 10px 15px;font-size: 100%;background: #fff;border: 1px solid #ddd;border-radius: 3px;height:1.1em;box-sizing:content-box;"></div>
			</td>
		</tr>
		<tr>
			<td>省份</td>
			<td>
				<select  ng-options="r as r.province for r in provinces" ng-model="province" ng-change="loadCity()" required>
					<option value="">请选择省份</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>城市</td>
			<td>
				<select ng-options="r as r.city for r in cities" ng-model="city" ng-change="loadRegion()" required>
					<option value="">请选择城市</option>
				</select>
			</td>
		</tr>
		<tr ng-if="order.repair_way==1">
			<td>您的地区</td>
			<td>
				<select ng-options="r.re_id as r.region for r in regions" ng-model="region" id="area" required>
					<option value="">请选择地区</option>
				</select>
			</td>
		</tr>
		<tr ng-if="order.repair_way==1">
			<td>详细地址</td>
			<td><input ng-model="order.address" required type="text" placeholder="请输入详细地址"></td>
		</tr>
		
		<tbody ng-if="order.repair_way==2">
			<tr>
				<td>选择门店</td>
				<td>
					<select ng-options="s as s.m_name for s in stores" ng-model="$parent.store" name="store" required>
						<option value="">请选择门店</option>
					</select>
				</td>
			</tr>
			<tr ng-if="store">
				<td>门店地址</td>
				<td ng-bind="store.m_address" style="padding-top:15px;padding-bottom:15px;"></td>
			</tr>
			<tr ng-if="store">
				<td>营业时间</td>
				<td style="padding-bottom:15px;"><span ng-bind="store.m_business_hours"></span></td>
			</tr>
			<tr ng-if="store">
				<td>门店电话</td>
				<td style="padding-bottom:15px;"><a href="tel:{{store.m_tel}}"></a></td>
			</tr>
		</tbody>
		
		<tr>
			<td style="vertical-align: top">备注</td>
			<td><textarea  ng-model="order.note" id="" rows="3"></textarea></td>
		</tr>
	</table>
	<div class="text-center text-color2 order-btn">
		<button ng-disabled="orderForm.$invalid" ng-click="sumbitOrder()"
		        class="primary-bg text-color2 btn"
		        style="margin:40px 0;width:100%;">询价下单</button>
	</div>
</form>
</validator>
<a href="tel:4000301388" class="phone_order"><img src="image/phone_order.png" alt=""></a>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/phone.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
	var rid = phone_getQueryString("rid");
	if(!rid){
		 alert("缺少订单id");
		 location.href="recycle_phone.html";
	}

	(function(){
		var optionsJson;
		optionsJson = {"value":"2016-10-29 10:00","beginYear":2016,"endYear":2017,"beginMonth":10,"beginDay":29,"beginHour":9};
		var options = optionsJson;
		var now=new Date();
		var dd = new Date();
		dd.setDate(dd.getDate()+7);//获取AddDayCount天后的日期
		options.beginYear=now.getFullYear();
		options.beginMonth=now.getMonth()+1;
		if(now.getHours()==23){
			options.beginDay=now.getDate()+1;
			options.beginHours=0;
		}else{
			options.beginDay=now.getDate();
			options.beginHours=now.getHours()+1;
		}
		options.endDay =dd.getDate();
		options.endMonth = dd.getMonth()+1;
		options.beginMinutes = 0;
		options.endHours = 23;

		window.timePicker = new mui.DtPicker(options);
	})();



	angular.module("APP", []).controller("appController", ['$scope', '$filter', function($scope, $filter){
		$scope.needCode = true; /*是否需要验证码*/
		$scope.region  = null;
		$scope.store = null;
		$scope.doorTime = {
		
		},
		$scope.order = {
			"repair_way":1,
			'mobphone':"",
			'vcode':"",
			'address':"",
			'note':"",
			"valuation":0
		};
		
		/*时间拾取*/
		$scope.pickTime = function() {
			timePicker.show(function (item) {
				$scope.order.door_time = item.text;
				$scope.$apply();
			});
		}
		
		/*提交订单*/
		$scope.sumbitOrder = function(){
			var order = angular.copy($scope.order);
			
			if(order.repair_way==2){
				order.member_id = $scope.store.member_id;
				order.region = $scope.store.re_id;
			} else{
				var region = $('#area').val();
				region = region.split(':');
				order.region = region[1];
			}
			
			order.rid = rid;
			var index = layer.open({type: 2,shadeClose:false});
			$.post(apiRecycle+'index.php/Home/User/add_recycle_order', order, function(res){
				if(res.code==200){
					location.href="recycle_order_info.html?rid="+rid;
				} else {
					alert(res.message);
				}
				layer.close(index);
			}, "json")
		}
		
		/*记载省份*/
		var index = layer.open({type: 2,shadeClose:false});
		$.get(apiRecycle+"index.php/Home/User/get_province", {}, function(res){
			$scope.provinces = res.data;
			$scope.$apply();
			layer.close(index);
		}, "json");
		
		/*加载城市*/
		$scope.loadCity = function(){
			var index = layer.open({type: 2,shadeClose:false});
			$.post(apiRecycle+"index.php/Home/User/get_city", {pid:$scope.province.pid}, function(res){
				$scope.cities = res.data;
				$scope.$apply();
				layer.close(index);
			}, "json");
		}
		
		/*加载地区*/
		$scope.loadRegion = function(){
			if($scope.order.repair_way==1){
				/*加载地区*/
				var index = layer.open({type: 2,shadeClose:false});
				$.post(apiRecycle+"index.php/Home/User/get_region", {city_id:$scope.city.city_id}, function(res){
					$scope.regions = res.data;
					$scope.$apply();
					layer.close(index);
				}, "json");
			} else {
				$scope.loadStore();
			}
		}
		
		/*加载区域的门店*/
		$scope.loadStore = function(){
			if($scope.order.repair_way=='2'){
				var index = layer.open({type: 2,shadeClose:false});
				$.get(apiRecycle+"index.php/Home/User/get_union_store", {city_id:$scope.city.city_id}, function(res){
					$scope.stores = res.data;
					$scope.$apply();
					layer.close(index);
				}, "json");
			}
		}
		
		//加载订单
		var index = layer.open({type: 2,shadeClose:false});
		$.post(apiRecycle+'index.php/Home/User/get_valuation',{rid:rid},function(res){
			$scope["v_name"] = res.data["v_name"];
			$scope.order["valuation"] = res.data["valuation"];
			$scope.$apply();
			layer.close(index);
		},'json');
		
		/*判断该用户是否绑定了手机*/
		var index = layer.open({type: 2,shadeClose:false});
		$.get(apiRepair+"index.php?m=Home&c=Weixin&a=getOrderUserInfo", null, function(res){
			if(res.data.is==1){
				$scope.order.mobphone = res.data.phone;
				$scope.showphone = false;
				$scope.$apply();
			} else {
				$scope.showphone = true;
				$scope.$apply();
			}
			layer.close(index);
		}, "json");
		
		/*发送短信验证码*/
		$scope.smsCount = 0;
		var interv;
		$scope.sendMessage = function(){
			if(!$scope.smsCount){
				$scope.smsCount = 60;
				var phone = $scope.order.mobphone;
				var index = layer.open({type: 2,shadeClose:false});
				$.post(apiRecycle+'index.php?m=Home&c=User&a=send_msgcode',{phone:phone},function(res){
					if(res.code==200){
						$scope.smsCount = 60;
						interv = setInterval(function(){
							if($scope.smsCount>0){
								$scope.smsCount-=1;
							} else {
								window.clearInterval(interv);
								$scope.smsCount==null;
							}
							$scope.$apply();
						}, 1000);
					}else{
						$scope.smsCount = 0;
						alert(res.message);
					}
					layer.close(index);
				},'json');
			}
		}
	}]);
</script>
</html>